<svg viewBox="0 0 100 100" width="400" height="400">
    <circle cx="30" cy="30" r="10" fill="#f00">
        <animate 
            attributeName="cx"
            from="30" 
            to="60"
            dur="5s"
            repeatCount="1"
            fill="freeze"/>
    </circle>
</svg>

<svg viewBox="0 0 100 100" width="400" height="400">
    <circle cx="30" cy="30" r="10" fill="#f00">
        <animate 
            attributeName="cx"
            from="30" 
            by="60"
            dur="1.500"
            repeatCount="1"
            repeatDur="5s"
            fill="remove"/>
    </circle>
</svg>

<script src="index.js"></script>